import React, { useEffect } from "react";
import { View, TouchableOpacity, StatusBar } from "react-native";
import FriendInformationCard from "@/components/Friend/FriendInformationCard";
import { Stack, useRouter } from "expo-router";
import { Ionicons } from "@expo/vector-icons";
import { useTheme } from "@/contexts/ThemeContext";
import { useFriendsState } from "@/hooks/Friend/friend";

const FriendInformationPage = () => {
  const router = useRouter();
  const { activeTheme, colors } = useTheme();
  const { currentFriend } = useFriendsState();

  // 设置状态栏颜色
  useEffect(() => {
    if (activeTheme === "dark") {
      StatusBar.setBarStyle("light-content", true);
    } else {
      StatusBar.setBarStyle("dark-content", true);
    }
    StatusBar.setBackgroundColor(colors.background);
  }, [activeTheme, colors]);

  return (
    <View style={{ flex: 1, backgroundColor: colors.backgroundLight }}>
      <Stack.Screen
        options={{
          headerShown: true,
          headerTitle: "好友信息",
          headerShadowVisible: false,
          headerStyle: { backgroundColor: colors.background },
          headerLeft: () => (
            <TouchableOpacity onPress={() => router.back()}>
              <Ionicons
                name="chevron-back"
                size={24}
                color={colors.text.primary}
              />
            </TouchableOpacity>
          ),
          headerRight: () => (
            <TouchableOpacity
              onPress={() => router.navigate("/friend/setting")}
            >
              <Ionicons
                name="settings-outline"
                size={24}
                color={colors.text.primary}
              />
            </TouchableOpacity>
          ),
        }}
      />
      <FriendInformationCard userInfo={currentFriend} />
    </View>
  );
};

export default FriendInformationPage;
